<template>
  <div>
    <Header
      :class="isHeaderFixed ? 'fixed-header-shadow' : 'fixed-header'"
      :isGoBack="false"
    >
      <template v-slot:left>
        <div>
          {{ checkedBookData.edition_name }}-
          {{ checkedBookData.grade_name }}
          测试报告
        </div>
      </template>
      <template v-slot:right>
        <div class="test-btn">
          <span
            class="btn-bg ml20"
            v-if="
              paperScore < 100 &&
                !$route.query.isFirst &&
                checkedBookData.book_id != 600
            "
          >
            <el-button
              v-if="wrongNum > 0"
              class="button button-bg-second"
              @click="goCorrectWrong"
            >
              错题订正
            </el-button>
          </span>

          <span class="btn-bg ml20">
            <el-button
              class="button button-border-second"
              @click="goStudyCenter"
            >
              返回学习中心
            </el-button>
          </span>
        </div>
      </template>
    </Header>
    <div
      class="test-report general-test sentence-test-report w1200"
      :class="isHeaderFixed ? 'container-fixed' : ''"
    >
      <div class="arts-paper-container" v-if="!$route.query.isFirst">
        <div class="arts-test-container">
          <div class="arts-paper-grade">
            <!-- <div class="paper-icon-grade" :class="isBig ? 'big-positon' : ''">
              <div class="bg-score" v-if="showBg"></div>
              <img
                v-if="paperScore >= 0 && paperScore < 60"
                src="@/assets/img/icon-grade1.png"
                alt=""
              />
              <img
                v-if="paperScore >= 60 && paperScore < 70"
                src="@/assets/img/icon-grade2.png"
                alt=""
              />
              <img
                v-if="paperScore >= 70 && paperScore < 80"
                src="@/assets/img/icon-grade3.png"
                alt=""
              />
              <img
                v-if="paperScore >= 80 && paperScore < 90"
                src="@/assets/img/icon-grade5.png"
                alt=""
              />
              <img
                v-if="paperScore >= 90 && paperScore < 100"
                src="@/assets/img/icon-grade6.png"
                alt=""
              />
              <img
                v-if="paperScore == 100"
                src="@/assets/img/icon-grade7.png"
                alt=""
              />
            </div> -->
            <!--  v-if="paperScore >= 85 && paperScore >= maxScore" -->
            <div
              class="test-score"
              :class="
                paperScore < 85
                  ? 'score-nopass'
                  : paperScore < 99
                  ? 'score-pass'
                  : ''
              "
            >
              <div class="paper-icon-grade" :class="isBig ? 'big-positon' : ''">
                <div class="bg-score" v-if="showBg"></div>
                <img
                  v-if="paperScore >= 0 && paperScore < 60"
                  src="@/assets/img/icon-grade1.png"
                  alt=""
                />
                <img
                  v-if="paperScore >= 60 && paperScore < 70"
                  src="@/assets/img/icon-grade2.png"
                  alt=""
                />
                <img
                  v-if="paperScore >= 70 && paperScore < 80"
                  src="@/assets/img/icon-grade3.png"
                  alt=""
                />
                <!-- <img
                v-if="paperScore > 42 && paperScore <= 56"
                src="@/assets/img/icon-grade4.png"
                alt=""
              /> -->
                <img
                  v-if="paperScore >= 80 && paperScore < 90"
                  src="@/assets/img/icon-grade5.png"
                  alt=""
                />
                <img
                  v-if="paperScore >= 90 && paperScore < 100"
                  src="@/assets/img/icon-grade6.png"
                  alt=""
                />
                <img
                  v-if="paperScore == 100"
                  src="@/assets/img/icon-grade7.png"
                  alt=""
                />
              </div>
              <div class="test-score-title">测试成绩</div>
              <div>
                <div class="test-text">本次测试获得</div>
                <div class="test-bg-score">
                  {{ paperScore }}分
                  <div class="test-add-i" v-if="addInt">
                    <img src="@/assets/img/bg-i-success.png" alt="" />
                    <span class="add-i-number">+{{ addInt }}</span>
                  </div>
                </div>
                <div class="test-text">
                  <span v-if="paperScore >= 0 && paperScore < 60"
                    >很遗憾 你仅到达了黑铁段位
                  </span>
                  <span v-if="paperScore >= 60 && paperScore < 70"
                    >很遗憾 你仅到达了青铜段位
                  </span>
                  <span v-if="paperScore >= 70 && paperScore < 80"
                    >很遗憾 你仅到达了白银段位
                  </span>
                  <!-- <span v-if="paperScore > 42 && paperScore <= 56"
                    >恭喜你 你的段位在黄金段位
                  </span> -->
                  <span v-if="paperScore >= 80 && paperScore < 90"
                    >恭喜你 你的段位在钻石段位
                  </span>
                  <span v-if="paperScore >= 90 && paperScore < 100">
                    恭喜你 你的段位在大师段位
                  </span>
                  <span v-if="paperScore >= 100">
                    太棒了 你到达了王者段位
                  </span>
                </div>
              </div>
            </div>
          </div>
          <div>
            <div class="btn-box">
              <div>
                <el-button
                  :class="!showWrong ? 'all-btn' : 'wrong-btn'"
                  @click="showWrong = false"
                  >全部试题</el-button
                >
                <el-button
                  v-if="wrongQuestionList.length > 0"
                  :class="showWrong ? 'all-btn' : 'wrong-btn'"
                  @click="showWrong = true"
                  >只看错题</el-button
                >
              </div>
              <div>
                <span class="right-number">答对{{ rightNum }}题</span>
                <span class="wrong-number">答错{{ wrongNum }}题</span>
                <el-button @click="goTest()">重新测试</el-button>
              </div>
            </div>
            <div class="question-container">
              <div class="question-type-container">
                <div class="type-title">
                  {{
                    $store.getters.sentenceCategory[$route.query.category]
                      ? $store.getters.sentenceCategory[$route.query.category]
                          .title
                      : ""
                  }}
                  <!-- <span class="reminder-text">
                    (注意：单词前后输入多余的空格为错误)
                  </span> -->
                </div>
                <ul class="question-list">
                  <li
                    class="question"
                    :class="question.studentAnswer ? 'checked-question' : 0"
                    v-for="(question, index2) in showWrong
                      ? wrongQuestionList
                      : paperQuestionList"
                    :key="index2"
                  >
                    <answeredQuestion
                      :index="index2 + 1"
                      :question="question"
                    ></answeredQuestion>
                  </li>
                </ul>
              </div>
              <div class="btn-box">
                <div>
                  <el-button
                    :class="!showWrong ? 'all-btn' : 'wrong-btn'"
                    @click="showWrong = false"
                    >全部试题</el-button
                  >
                  <el-button
                    v-if="wrongQuestionList.length > 0"
                    :class="showWrong ? 'all-btn' : 'wrong-btn'"
                    @click="showWrong = true"
                    >只看错题</el-button
                  >
                </div>
                <div>
                  <span class="right-number">答对{{ rightNum }}题</span>
                  <span class="wrong-number">答错{{ wrongNum }}题</span>
                  <el-button @click="goTest()">重新测试</el-button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <PlayVoiceAudio ref="playVoiceAudio"></PlayVoiceAudio>
  </div>
</template>
<script>
import answeredQuestion from "./quetionType/answeredQuestion";
import PlayVoiceAudio from "../../../components/PlayVoiceAudio";
import Header from "@/components/Header";
export default {
  data() {
    return {
      homeworkInfo: {
        question_info_type_list: [],
      },
      isHeaderFixed: false,
      showWrong: false,
      paperQuestionList: [],
      wrongQuestionList: [],
      paperScore: 0,
      addInt: 0,
      classInfo: {},
      typeObj: {
        0: "听音组句",
        1: "听力理解",
        2: "连词成句",
        3: "句子默写",
      },
      rightNum: 0,
      wrongNum: 0,

      checkedBookData: {},
      isBig: true,
      showBg: true,
      fromRoute: null,
    };
  },
  computed: {
    showQuestionList() {
      if (this.showWrong) {
        return this.wrongQuestionList;
      } else {
        return this.paperQuestionList;
      }
    },
  },

  methods: {
    wrongTypeNum(typeId) {
      let questionList = this.paperQuestionList.filter((item) => {
        return item.question_type == typeId;
      });
      return questionList[0].question_info_list.filter((question) => {
        return question.is_true == 1;
      }).length;
    },
    goCorrectWrong() {
      this.$router.push({
        name: "sentenceCorrectWrong",
      });
    },
    goTest(category) {
      let query = this.$route.query;
      if (category) {
        query.category = category;
      }
      if (this.fromRoute && this.fromRoute.name) {
        this.$router.push({
          name: this.fromRoute.name,
          query: query,
        });
        return;
      }
    },

    goStudyCenter() {
      this.$router.push({
        name: "sentenceStudyCenter",
      });
    },
    getHomeworkInfo() {
      let res = JSON.parse(localStorage.getItem("sentencePaperRes"));
      if (res.code == 200) {
        // 加的学币
        this.addInt = res.data.integral;
        res.data.list_volist.forEach((question, questionIndex) => {
          question.questionIndex = questionIndex;
          // 句子
          question.sentence = question.content;
          // 释义
          question.paraphrase = question.sentence_answer_vos[0].translation;
          // 音频
          question.isTrue = question.sentence_answer_vos[0].is_true;
          question.audioURL = question.audio_src;
          if (question.questionType == 1) {
            question.trueAnswer = question.sentence_answer_vos[0].translation;
          }
        });
        this.homeworkInfo = res.data;
        this.paperScore = res.data.total_num;

        this.paperQuestionList = res.data.list_volist;
        this.wrongQuestionList = res.data.list_volist.filter((question) => {
          return question.isTrue == 0;
        });
        this.paperQuestionList.forEach((question) => {
          if (question.isTrue) {
            this.rightNum++;
          } else {
            this.wrongNum++;
          }
        });
        let type;
        if (this.paperScore == 100) {
          type = 7;
        } else if (this.paperScore >= 90 && this.paperScore <= 99) {
          type = 6;
        } else if (this.paperScore >= 80 && this.paperScore < 90) {
          type = 5;
        } else if (this.paperScore >= 70 && this.paperScore < 80) {
          type = 3;
        } else if (this.paperScore >= 60 && this.paperScore < 70) {
          type = 2;
        } else if (this.paperScore < 60) {
          type = 1;
        }
        this.scoreAudioType = type;
        this.$refs.playVoiceAudio.changeType(type, true);
      }
    },
    scrollBehavior() {
      let dom = document.getElementById("app");
      const top = dom.pageYOffset || dom.scrollTop || dom.scrollTop;
      if (top > 0) {
        this.isHeaderFixed = true;
      } else {
        this.isHeaderFixed = false;
      }
    },
  },
  created() {
    this.checkedBookData = JSON.parse(localStorage.getItem("bookData"));
  },
  mounted() {
    this.getHomeworkInfo();
    document
      .getElementById("app")
      .addEventListener("scroll", this.scrollBehavior);

    this.$nextTick(() => {
      setTimeout(() => {
        this.isBig = false;
      }, 500);
      setTimeout(() => {
        this.showBg = false;
      }, 1000);
    });
    document.getElementById("app").scrollTop = 0;
  },
  beforeRouteEnter(to, from, next) {
    // ...
    next((vm) => {
      vm.fromRoute = from;
    });
  },
  beforeDestroy() {
    document
      .getElementById("app")
      .removeEventListener("scroll", this.scrollBehavior);
  },
  components: {
    Header,
    answeredQuestion,
    PlayVoiceAudio,
  },
};
</script>
